<template>
  <div class="center-control tab-full-page">
    <PageTab :tabList="tabList" :active="activeTab" @change="handleTabChange" />
    <section class="content">
      <Energy v-if="activeTab == 'energy'" />
      <Device v-if="activeTab == 'device'" />
      <Park v-if="activeTab == 'park'" />
      <MeetingRoom v-if="activeTab == 'meetingRoom'" />
    </section>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import common from "../../utils/common";
import store from "../../../../store/index";
import SocketService from "../../utils/websocket";
import Energy from "./energy.vue";
import Device from "./device.vue";
import Park from "./park.vue";
import MeetingRoom from "./meetingRoom.vue";
import PageTab from "../common/PageTab.vue";

export default defineComponent({
  name: "CenterControl",
  components: { PageTab, Energy, Device, Park, MeetingRoom },
  setup() {
    const state = reactive({
      tabBarStyle: { color: common.theme.lightWhite },
      tabList: TAB_LIST,
      activeTab: "energy",
      socketServe: SocketService.Instance,
    });
    const handleTabChange = (e) => {
      const { key } = e;
      store.dispatch("SetDataVCurrentMenu", `centerControl-${key}`).then(() => {
        state.socketServe.initMenuSocket();
      });
      state.activeTab = key;
    };
    return {
      ...toRefs(state),
      handleTabChange,
    };
  },
});

const TAB_LIST = [
  { key: "energy", title: "能耗统计" },
  { key: "device", title: "设备管理" },
  { key: "park", title: "停车场" },
  { key: "meetingRoom", title: "会议室" },
];
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.center-control {
  .content {
    height: calc(~"100% - 70px");
    overflow: hidden;
  }
}
</style>
